<template>
  <div class="backstage">
    <el-row :gutter="20" class="p-20 pb-0">
      <el-col :span="14">
        <div class="p-16 d-cw-b">
          <el-button type="primary" class="ba-float-r bt-export" @click="openUserDialog()">
            <i class="el-icon-tickets" />
            Insert</el-button>
          <h5>用户管理</h5>
          <div class="p-20 t-a-c">
            <el-table
              :data="UserList"
              height="500"
              border="true"
            >
              <el-table-column
                prop="id"
                label="编号"
              />
              <el-table-column
                prop="username"
                label="账号"
              />
              <el-table-column
                prop="role"
                label="账号权限"
              />
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog
              title="提示"
              :visible.sync="Dialog.UserUpdata"
              width="30%"
            >
              <el-form ref="form" :model="Updataform" label-width="80px">
                <el-form-item label="用户名">
                  <el-input v-model="Updataform.username" />
                </el-form-item>
                <el-form-item label="用户密码">
                  <el-input v-model="Updataform.password" />
                </el-form-item>
                <el-form-item label="用户规则">
                  <el-select v-model="Updataform.role" placeholder="请选择">
                    <el-option
                      v-for="item in this.rolesSelect"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
            <el-button @click="Dialog.UserUpdata = false">取 消</el-button>
            <el-button type="primary" @click="UpdataUser()">确 定</el-button>
          </span>
            </el-dialog>

          </div>

        </div>
      </el-col>
      <el-col :span="10">
        <div class="p-16 d-cw-b">
          <h5>权限列表</h5>
          <div class="p-20 t-a-c">
            <el-table
              :data="RoleList"
              height="500"
              border="true"
            >
              <el-table-column
                prop="id"
                label="编号"
              />
              <el-table-column
                prop="name"
                label="权限"
              />
              <el-table-column
                prop="namedescription"
                label="权限名称"
              />
            </el-table>

          </div>

        </div>
      </el-col>
    </el-row>

<!--    <div class="padding">-->
<!--      <div class="padding text-align-center">-->
<!--        <el-button type="primary" icon="el-icon-edit" circle @click="openUserDialog()" />-->
        <el-dialog
          title="提示"
          :visible.sync="Dialog.UserAdd"
          width="30%"
        >
          <el-form ref="form" :model="Addform" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="Addform.username" type="text" />
            </el-form-item>
            <el-form-item label="用户密码">
              <el-input v-model="Addform.password" type="text" />
            </el-form-item>
            <el-form-item label="用户规则">
              <el-select v-model="Addform.role" placeholder="请选择">
                <el-option
                  v-for="item in this.rolesSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="Dialog.UserAdd = false">取 消</el-button>
            <el-button type="primary" @click="AddUser()">确 定</el-button>
          </span>
        </el-dialog>
<!--      </div>-->
<!--      <div class="padding-5px">-->
<!--        <span class="font-size">权限列表</span>-->
<!--      </div>-->
<!--      <div class="padding text-align-center">-->
<!--      </div>-->
<!--      <div class="padding-5px">-->
<!--        <span class="font-size">用户列表</span>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  name: 'Backstage',
  data: function() {
    return {
      rolesSelect: [{
        value: '1',
        label: '系统管理员'
      },
      {
        value: '2',
        label: '普通用户'
      }],
      RoleList: [],
      UserList: [],
      Addform: {
        username: '',
        password: '',
        role: ''
      },
      Updataform: {
        username: '',
        password: '',
        role: '',
        id: ''
      },
      Dialog: {
        UserAdd: false,
        UserUpdata: false
      }

    }
  },
  created() {
    this.defaultPost()
  },
  methods: {
    defaultPost() {
      this.$axios.post(`/User/GetAllRole`).then(res => {
        if (res.data.code === 200) {
          this.RoleList = res.data.data
        }
        this.Code(res.data.code)
      })
      this.$axios.post(`/User/GetAllUser`).then(res => {
        if (res.data.code === 200) {
          this.UserList = res.data.data
        }
      })
    },
    handleEdit(index, row) {
      this.Dialog.UserUpdata = true
      console.log(index, row)
      this.Updataform.id = row.id
      this.Updataform.username = row.username
      this.Updataform.password = ''
      this.Updataform.role = row.role
    },
    handleDelete(index, row) {
      var data = new URLSearchParams()
      data.append('id', row.id)
      this.$axios.post(`/User/delete`, data).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.message
          })
        } else {
          this.code(res.data.code)
        }
      })
    },
    openUserDialog() {
      this.Addform = {
        username: '',
        password: '',
        role: ''
      }
      this.Dialog.UserAdd = true
    },
    AddUser() {
      var data = new URLSearchParams()
      // eslint-disable-next-line no-undef,camelcase
      data.append('username', this.Addform.username)
      data.append('password', this.Addform.password)
      data.append('role', this.Addform.role)
      this.$axios.post(`/User/add`, data).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.Dialog.UserAdd = false
        } else {
          this.code(res.data.code)
        }
      })
    },
    UpdataUser() {
      var data = new URLSearchParams()
      // eslint-disable-next-line no-undef,camelcase
      data.append('username', this.Updataform.username)
      if (this.Updataform.password === '' || this.Updataform.password === undefined) {} else {
        data.append('password', this.Updataform.password)
      }
      data.append('role', this.Updataform.role)
      data.append('id', this.Updataform.id)
      this.$axios.post(`/User/put`, data).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.Dialog.UserUpdata = false
        } else {
          this.code(res.data.code)
        }
      })
    },
    loginOut() {
      this.$axios.post(`/logout`).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.$router.push({
            // eslint-disable-next-line no-undef
            path: `/login`
          })
        }
        this.code()
      })
    }
  }
}
</script>

<style scoped>
  .backstage{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size:  1rem;
    font-weight: 400;
    color: #2e3136;
    background-color: rgb(240, 242, 245);
  }
  .p-20{
    padding: 20px;
  }
  .p-16{
    padding: 16px;
  }
  .t-a-c{
    text-align: center;
  }
  .d-cw-b{
    background-color: white;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -webkit-box-shadow: 10px 10px 6px -7px rgba(0,0,0,0.05);
    -moz-box-shadow: 10px 10px 6px -7px rgba(0,0,0,0.05);
    box-shadow: 10px 10px 6px -7px rgba(0,0,0,0.05);
  }
  .backstage h1,h2,h3,h4,h5,h6,h7{
    padding: 0;
    margin: 0;
    font-weight: 600;
  }
  .ba-float-r{
    float: right;
  }
  .bt-export{
    margin: 0px;
    padding: 6px 7px;
    background-color: #5369f8;
    font-size: 0.7rem;
  }

</style>
